<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('表单折叠')}`">{{ $t('表单折叠') }}</t>
            <li>
                <span class="d-code">row-field-size</span>配置表单一行展示多少个控件
            </li>
            <li>
                <span class="d-code">show-expand</span>是否启用折叠功能
            </li>
            <li>
                <span class="d-code">default-expand-fields</span>当处于折叠状态下，初始展示多少个控件
            </li>
        </template>
        <sib-form
            show-expand
            :row-field-size="4"
            :default-expand-fields="2"
            :fields="fields">
        </sib-form>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const fields = ref(Array(20).fill().map((_, i) => ({
            label: '文本框',
            code: `code${i}`,
            type: 'text',
        })));

        return {
            fields,
            templateString: `<template>
    <sib-form
        style="width: 1000px;"
        show-expand
        :row-field-size="3"
        :default-expand-fields="2"
        :fields="fields">
    </sib-form>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const fields = ref(Array(20).fill().map((_, i) => ({
            label: '文本框',
            code: \`code\${i}\`,
            type: 'text',
        })));

        return { fields };
    },
};
<\/script>`,
        };
    },
};
</script>
